<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-900 via-blue-950 to-black pt-24 flex flex-col items-center">
    <MainMenu />
    <div class="w-full px-0 py-6">
      <div class="flex items-center mb-6">
        <span class="text-3xl font-bold text-cyan-300 mr-6">图层管理</span>
        <a-input-search v-model:value="searchText" placeholder="搜索..." enter-button class="w-72 rounded-lg" @search="handleSearch" />
        <a-button type="primary" class="ml-auto rounded-lg" @click="handleAdd">+ 添加图层</a-button>
      </div>
      <div class="bg-white/80 rounded-2xl shadow-xl p-6">
        <a-form layout="inline" class="mb-4">
          <a-form-item label="图层类型">
            <a-select v-model:value="filterType" style="width: 120px">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="金属图层">金属图层</a-select-option>
              <a-select-option value="陶瓷图层">陶瓷图层</a-select-option>
              <a-select-option value="塑料图层">塑料图层</a-select-option>
              <a-select-option value="复合图层">复合图层</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="状态">
            <a-select v-model:value="filterStatus" style="width: 120px">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="启用">启用</a-select-option>
              <a-select-option value="停用">停用</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">应用筛选</a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="handleReset">重置</a-button>
          </a-form-item>
        </a-form>
        <a-table
          :columns="columns"
          :data-source="pagedData"
          :pagination="false"
          row-key="id"
          bordered
          class="rounded-xl overflow-hidden"
        >
          <template #status="{ text }">
            <a-tag :color="text === '启用' ? 'green' : 'red'">{{ text }}</a-tag>
          </template>
          <template #action="{ record }">
            <a-space>
              <a-button type="link" @click="handleEdit(record)"><i class="fas fa-pen"></i></a-button>
              <a-button type="link" @click="handleView(record)"><i class="fas fa-eye"></i></a-button>
              <a-button type="link" danger @click="handleDelete(record)"><i class="fas fa-trash"></i></a-button>
            </a-space>
          </template>
        </a-table>
        <div class="flex justify-end mt-4">
          <a-pagination
            :current="currentPage"
            :page-size="pageSize"
            :total="filteredData.length"
            show-size-changer
            :page-size-options="[5, 10, 20]"
            @change="handlePageChange"
            @showSizeChange="handlePageSizeChange"
            class="rounded-lg"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MainMenu from '../components/MainMenu.vue'
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'

const searchText = ref('')
const filterType = ref('')
const filterStatus = ref('')
const currentPage = ref(1)
const pageSize = ref(5)

const rawData = ref([
  { id: 'CT001', name: '标准金属图层', type: '金属图层', reflect: 0.75, opacity: 0.0, date: '2023/06/15', status: '启用' },
  { id: 'CT002', name: '透明玻璃图层', type: '陶瓷图层', reflect: 0.3, opacity: 0.85, date: '2023/07/22', status: '启用' },
  { id: 'CT003', name: '哑光塑料图层', type: '塑料图层', reflect: 0.1, opacity: 0.0, date: '2023/08/05', status: '启用' },
  { id: 'CT004', name: '特种复合图层', type: '复合图层', reflect: 0.5, opacity: 0.2, date: '2023/09/18', status: '停用' },
  { id: 'CT005', name: '高反光金属图层', type: '金属图层', reflect: 0.9, opacity: 0.0, date: '2023/10/30', status: '启用' },
])

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id', align: 'center' },
  { title: '名称', dataIndex: 'name', key: 'name', align: 'center' },
  { title: '类型', dataIndex: 'type', key: 'type', align: 'center' },
  { title: '反射率', dataIndex: 'reflect', key: 'reflect', align: 'center' },
  { title: '透明度', dataIndex: 'opacity', key: 'opacity', align: 'center' },
  { title: '创建日期', dataIndex: 'date', key: 'date', align: 'center' },
  { title: '状态', dataIndex: 'status', key: 'status', align: 'center', slots: { customRender: 'status' } },
  { title: '操作', key: 'action', align: 'center', slots: { customRender: 'action' } },
]

const filteredData = computed(() => {
  return rawData.value.filter(item => {
    const matchType = !filterType.value || item.type === filterType.value
    const matchStatus = !filterStatus.value || item.status === filterStatus.value
    const matchSearch = !searchText.value || item.name.includes(searchText.value) || item.id.includes(searchText.value)
    return matchType && matchStatus && matchSearch
  })
})

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return filteredData.value.slice(start, start + pageSize.value)
})

function handleSearch() {
  currentPage.value = 1
}
function handleReset() {
  searchText.value = ''
  filterType.value = ''
  filterStatus.value = ''
  currentPage.value = 1
}
function handlePageChange(page) {
  currentPage.value = page
}
function handlePageSizeChange(current, size) {
  pageSize.value = size
  currentPage.value = 1
}
function handleAdd() {
  message.info('添加图层功能演示')
}
function handleEdit(record) {
  message.info('编辑：' + record.name)
}
function handleView(record) {
  message.info('查看：' + record.name)
}
function handleDelete(record) {
  rawData.value = rawData.value.filter(item => item.id !== record.id)
  message.success('已删除 ' + record.name)
}
</script>

<style scoped>
.ant-table {
  background: transparent !important;
}
.ant-table-thead > tr > th {
  background: #e6f7ff !important;
  color: #222 !important;
}
.ant-table-tbody > tr > td {
  background: transparent !important;
}
.ant-pagination {
  background: transparent !important;
}
</style> 